<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置坐标</title>
    	<link rel="stylesheet" href="/dvmini/res/plugins/layui/css/layui.css">
    	<link rel="stylesheet" href="http://at.alicdn.com/t/font_9lmlt21w1lv26gvi.css">
		<link rel="stylesheet" href="/dvmini/res/css/basic.css">
    <style>
    
        .layui-form-label{
        	width:100px !important;
        }
        .layui-input-block{
        	margin-left:130px !important;
        }
      
        .layui-input-block,.layui-input-inline{
        	width:140px !important;
        }
         .layui-input-inline input{
         	padding:0 5px;
         }
            body {
            margin: 0;
            padding: 0;
            -moz-user-select: none; /*鐏嫄*/
            -webkit-user-select: none;  /*webkit娴忚鍣�*/
            -ms-user-select: none;   /*IE10*/
            -khtml-user-select: none; /*鏃╂湡娴忚鍣�*/
            user-select: none;
        }
    </style>
</head>

<body style="min-width:1070px;" >
 <div class="hint">提示：上传海报后，拖拽拉伸左边海报上的二维码设置二维码在海报上的位置和大小，建议二维码宽高不小于120px，以免无法识别。</div>
           <div style="margin-bottom:20px;overflow:hidden;">
           	 <div class="haibaofl">
               <div class="haibao-box">
			    	<!-- <img src="/dvmini/res/images/pg_top.jpg" class="ph_top"/>  -->
			    	<div class="haibao-viewbox">
				    	<div class="haibao-view">
					       <img src="/dvmini/res/images/moren.jpg" alt="">
					        <div id="box" class="box">
					            <div id="coor" class="coor"><span class="iconfont icon-suofang"></span></div>
					        </div>
					    </div>
				    </div>
				   <!--  <img src="/dvmini/res/images/pg_bottom.jpg" class="ph_ft"/>  -->
			    </div>
            </div>
            <div class="haibaofr" style="margin-top:40px;">
                <div class="layui-form">
                	 <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>海报名称</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="name" lay-verify="name" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                         <div class="layui-form-mid layui-word-aux">不超过20个汉字</div>
                    </div>
                     <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>海报类别</label>
                        
                        <div class="layui-input-inline">
	                        <select name="posttype">
								<option value="0">请选择</option>
								<option value="1">项目海报</option>
								<option value="2">销售助手首页</option>
								<option value="3">万小二首页</option>
							</select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>上传海报</label>
                        <div class="layui-input-inline">
                            <input type="text"  name="imgurl" placeholder="请上传一张海报"  class="layui-input" style="display:none;">
                        </div>
                        <div id="upload" style="display:inline-block;">
                          <span class="layui-btn" style="float:left;margin-right:10px;"> 上传海报</span>
                        </div>
                      
                         <div class="layui-form-mid layui-word-aux" style="margin-left:130px;">海报宽度应不小于640px,以免海报显示不清晰</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>二维码宽度</label>
                        <div class="layui-input-inline">
                            <input type="text" readonly  name="width" placeholder="宽度" autocomplete="off" class="layui-input" value="120" style="background-color:#f5f5f5;color:#666;">
                        </div>
                        
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>二维码高度</label>
                        <div class="layui-input-inline">
                            <input type="text" readonly  name="height" placeholder="高度" autocomplete="off" class="layui-input" value="120" style="background-color:#f5f5f5;color:#666;">
                        </div>
                        
                    </div>
                    <div class="layui-form-item" style="margin-bottom:0;">
                        <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>二维码位置</label>
                        <div class="layui-input-block" >
	                        <input type="text" readonly  name="x" placeholder="X坐标" autocomplete="off" class="layui-input" style="margin-bottom:15px;background-color:#f5f5f5;color:#666;" value="0">
	                        <input type="text" readonly  name="y" placeholder="Y坐标" autocomplete="off" class="layui-input" style="margin-bottom:15px;background-color:#f5f5f5;color:#666;" value="0">
                        </div>
                    </div>
					
                   
                  
                   
                    <div class="layui-form-item" style="margin-left:130px;">
                    	<button class="layui-btn submit">提交</button>
                    	<button class="layui-btn layui-btn-primary resetBtn">重置</button>
                	</div>
				</div>
            </div>
           </div>
    
    <script src='/dvmini/res/js/jquery.min.js'></script>
    <script src="/dvmini/res/plugins/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/dvmini/res/js/me.js"></script>
    
    <script>
    var imgurl="";
    var height = window.parent.height || 120
    var width = window.parent.width || 120
    var x = window.parent.x || 0
    var y = window.parent.y || 0
    $("#box").css({"width":width,"height":height,"top":y,"left":x})
   	$(".haibao-view img").attr("src",  $("input[name=postertemplet]",window.parent.document).val() || "/dvmini/res/images/moren.jpg")
    
    $(function () {
        $(document).mousemove(function (e) {

            if (!!this.move) {

                var posix = !document.move_target ? { 'x': 0, 'y': 0 } : document.move_target.posix

                var callback = document.call_down || function () {

                    if (this.move_target.id == "box") {
                        y = Math.max(e.pageY - posix.y  , 0)
                        y = Math.min(y,$(".haibao-view").height()-height)
                        x = Math.max(e.pageX - posix.x  , 0)
                        x = Math.min(x,$(".haibao-view").width()-width)
                        
                        $("#box").css({
                            'top': y ,
                            'left': x 
                        });
                       
                        $("input[name=x]").val(decimal(x,0));
                		$("input[name=y]").val(decimal(y,0));
                    }

                };

                callback.call(this, e, posix);
            }
        }).mouseup(function (e) {

            if (!!this.move) {
                var callback = document.call_up || function () { };
                callback.call(this, e);
                $.extend(this, {
                    'move': false,
                    'move_target': null,
                    'call_down': false,
                    'call_up': false
                });
            }
           
        });

        var $box = $('#box').mousedown(function (e) {
            var offset = $(this).offset();

            this.posix = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };

            $.extend(document, { 'move': true, 'move_target': this });

        }).on('mousedown', '#coor', function (e) {
            var posix = {
                'w': $box.width(),
                'h': $box.height(),
                'x': e.pageX,
                'y': e.pageY
            };

            $.extend(document, {
                'move': true, 'call_down': function (e) {
                    width = Math.max(30, e.pageX - posix.x + posix.w)
                    width = Math.min(width,$(".haibao-view").width() - x)
                    height = Math.max(30, e.pageY - posix.y + posix.h)
                    height = Math.min(height,$(".haibao-view").height() - y)
                    height = width
                    width = height
                    $box.css({
                        'width': width,
                        'height': height
                    });
                    $("input[name=width]").val(decimal(width,0));
           		 $("input[name=height]").val(decimal(height,0));
                }
           
            });
    		
            return false;
        });

		
    });
    layui.use(['form', 'element', 'laydate', 'layer', 'laypage','upload'], function() {
		var form = layui.form(),
			element = layui.element(),
			laydate = layui.laydate,
			layer = layui.layer,
			laypage = layui.laypage;
		   var $ = layui.jquery
		    ,upload = layui.upload;
		  var id= getUrl_G("id");
		  if(id>0){
			  $.post("/dvmini/poster/getPoster",{id:id},function(data){
				  console.log(data)
				  	$("input[name=name]").val(data.data.name);
				  $("select[name=posttype]").val(data.data.postertype);
				  $("input[name=width]").val(data.data.width);
				  $("input[name=height]").val(data.data.height);
				  $("input[name=x]").val(data.data.x);
				  $("input[name=y]").val(data.data.y);
			    	$("input[name=imgurl]").val(data.data.imgurl);
			    	$(".haibao-view img").attr("src",data.data.imgurl);
			    	 $("#box").css({"width":data.data.width,"height":data.data.height,"top":data.data.y,"left":data.data.x})
			    	form.render();
			  })
		  }
		    //普通图片上传
		    var uploadInst = upload.render({
		      elem: '#upload'
		      ,url: '/dvmini/upload/UploadImg'
		      ,done: function(data){
		    	  console.log(data)
		    	  if(data.code==0){
		    		  imgurl=data.data;
				   	$("input[name=imgurl]").val(imgurl);
				   	$(".haibao-view img").attr("src",imgurl);
				    	 
		    	  }
		    	
		        //如果上传失败
		        if(data.code > 0){
		          return layer.msg('上传失败');
		        }
		        //上传成功
		      }
		     
		    });
		    
		    $(".resetBtn").on("click",function(){
		    	$("input[name=name]").val("");
		    	$("select[name=posttype]").val("");
		    	form.render();
		    })
		    //提交
		    $(".submit").on("click",function(){
		    	 	var x= $("input[name=x]").val();
			    	var y=	$("input[name=y]").val();
			    	var width=$("input[name=width]").val();
			    	var height=$("input[name=height]").val();
			    	var name=$("input[name=name]").val();
			    	var posttype=$("select[name=posttype]").val();
			    	var imgurl=$("input[name=imgurl]").val();
			    	if(name==""){
			    		top.layer.msg("请填写海报名称");
			    		return false;
			    	}else{
			    		if(strlen(name) > 40) {
				    		top.layer.msg("海报名称不超过20个汉字");
				    		return false;
						}
			    	}
			    	//表单验证
			    	
			    	if(posttype==""||posttype=="0"){
			    		top.layer.msg("请选择海报类别");
			    		return false;
			    	}
			    	if(imgurl==""){
			    		top.layer.msg("请上传海报");
			    		return false;
			    	}
			    	if(id>0){
			    		$.post("/dvmini/poster/updatetemplet",{
			    			id:id,
				    		name:name,
				    		posttype:posttype,
				    		imgurl:imgurl,
				    		x:x,
				    		y:y,
				    		width:width,
				    		height:height
				    	},function(data){
				    		console.log(data);
				    		if(data.code==0){
				    			top.layer.msg("修改成功");
				    		}
				    	})
			    	}else{
			    		$.post("/dvmini/poster/addtemplet",{
				    		name:name,
				    		posttype:posttype,
				    		imgurl:imgurl,
				    		x:x,
				    		y:y,
				    		width:width,
				    		height:height
				    	},function(data){
				    		console.log(data);
				    		if(data.code==0){
				    			top.layer.msg("添加成功");
				    		}
				    	})
			    	}
			    	
				
		    })
		   /*  $(".returnBtn").on("click",function(){
		    	if(parent.tab.exists("海报模板")>0){
					var tabid=parent.tab.getTabId("海报模板");
					parent.tab.deleteTab(tabid);
				}
				parent.tab.tabAdd({
					href: "/dvmini/poster/posterlist",
					icon: "fa-cubes",
					title: "海报模板" 
				});
		    }) */
		  
		    
    });
    //对数字进行四舍五入
    function decimal(num,v){
    	var vv = Math.pow(10,v);
    	return Math.round(num*vv)/vv;
    }

   
   
    </script>
</body>



</html>